<template>
    <div class="mobile-banner-wrap">
        <div class="mobile-banner">
            <div :class="['banner-wrap', { 'bannerActive' : index === step}]" :style="{'backgroundImage': `${banner.color}`}" v-for="(banner, index) in banners" :key="index">
                <div class="text">
                      <h1>{{banner.title}}</h1>
                      <p class="title">{{banner.discription}}</p>
                      <div class="operation">
                          <a :href="banner.leftHref">Learn More</a>
                          <a :href="banner.rightHref">Buy Now ></a>
                      </div>
                </div>
                <div class="img-wrap">
                    <img src="https://cdn.swellpro.cn/newSite/mobile/mobile-splashDrone.png" alt="">
                </div>
            </div>
            <div class="banner-dots">
                <div v-for="(banner, index) in banners" :key="index" :class="['dot', { 'active' : index === step}]"></div>
            </div>
        </div>
    </div>
</template>

<script>
import EventUtil from '@/assets/js/touch'
export default {
  data () {
    return {
        banners: [
            {
                title: 'SplashDrone 3+',
                discription: 'The world’s first waterproof quadcopter',
                leftHref: '',
                rightHref: '',
                color: '-webkit-linear-gradient(top,#14141a,#505459)'
            },
            {
                title: 'SplashDrone 3+',
                discription: 'The world’s first waterproof quadcopter',
                leftHref: '',
                rightHref: '',
                color: '-webkit-linear-gradient(top,#707c87,#98a6b3)'
            },
        ],
        step: -1,
        Timer: null
    };
  },

  mounted() {
    // 保证第一个banner也能有相应的动画
    setTimeout(() => {
      this.run()
    }, 50);

   const $el = document.getElementsByClassName('mobile-banner')[0];
   EventUtil.listenTouchDirection($el, true, false, this.right, false, this.left);

    // 开始轮播
    this.Timer = setInterval(()=> {
      this.run()
    }, 4000)
  },

  methods: {
    left() {
        clearInterval(this.Timer);
        this.run(false);
    },

    right() {
        clearInterval(this.Timer);
        this.run(true);
    },
    
    /**
    * 轮播图开始轮播
    * @param { Boolean } flag true => 向右轮播 false => 向左轮播
    */
    run(flag = true) {
      const step = this.step
      const { length } = this.banners

      if (flag) { // 向右轮播
        this.step = step === length - 1 ? 0 : this.step + 1
      } else { // 向左轮播
        this.step = step === 0 ? length - 1 : this.step - 1
      }
    }
  }
}

</script>
<style lang='stylus'>
pxToVw(px)
    return unit(px / 7.5 * 2, 'vw')
.mobile-banner-wrap
    width 100%
    height pxToVw(390)
    .mobile-banner
        height pxToVw(450)
        position absolute
        left 0
        top 0
        z-index 1
        width 100%
        .banner-wrap
            position absolute
            z-index 10
            width 100%
            height 100%
            top 0
            left 0
            opacity 0
            transition opacity .6s ease-out
            background-repeat no-repeat
            background-position 50%
            background-size cover
            box-sizing border-box
            padding-top pxToVw(96)
            overflow hidden
            .text
                text-align center
                color #fff
                opacity: 0
                transform translate3d(0,-25px,0)
                transition all .7s ease-in-out
                h1
                    color #fff
                    font-size pxToVw(28) 
                .title
                    font-size pxToVw(18) 
                .operation
                    display flex
                    justify-content center
                    padding-top pxToVw(24) 
                    a
                        color #f26444
                        font-weight 300
                        font-size pxToVw(16) 
                        margin-right pxToVw(20)
            .img-wrap
                width 100% 
                height pxToVw(236)
                box-sizing border-box
                padding 34px 0
                img
                    display block
                    width 100%
                    transition all .7s ease-in-out
                    opacity: 0
                    transform translate3d(0,80px,0)
        .bannerActive
            z-index 11
            opacity 1
            .img-wrap
                img
                    opacity 1
                    transform translate3d(0,0,0)
            .text
                opacity 1
                transform translate3d(0,0,0)
        .banner
            &-dots
                position absolute
                z-index 11
                bottom 0
                left 0
                width 100%
                height pxToVw(24)
                display flex
                justify-content center
                align-items center
                .dot
                    width 4px
                    height 4px
                    border-radius 50%
                    background #fff
                    margin-right pxToVw(3)
                    transition all .3s
                .active
                    width 15px
                    height 4px
                    border-radius 10px
</style>